<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG基础</title>
</head>
<style>
    .header-box {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        margin: 0 0 20px 0;
    }

    .header-box a {
        text-decoration: none;
        color: rgb(82, 78, 78);
        border-radius: 6px;
        width: 200px;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #cddc39;
    }

    .main-demo {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
    }

    .main-demo svg {
        border: 1px solid rgb(238, 237, 237);
    }
</style>

<body>
    <div class="header-box">
        <a href="./svg/progress.html">圆形进度条</a>
    </div>
    <div class="main-demo">
        <!-- svg是可伸缩矢量图，放大缩小图片不会变形 -->
        <!-- 
        矩形 rect
        圆形 circle
        椭圆 ellipse
        线条 line
        多线条 polyline
        多边形 polygon
        文本 text
        路径 path
        -->
        <svg width="200" height="200">
            <rect x="10" y="20" width="100" height="60" fill="green" stroke="black" stroke-width="3" fill-opacity="0.8"
                stroke-opacity="0.4">
            </rect>
            <!-- rx ry设置圆角 -->
            <rect x="50" y="100" rx="10" ry="10" width="100" height="60" fill="green" opacity="0.7">
            </rect>
        </svg>

        <svg width="200" height="200">
            <!-- cx cy圆心坐标 r半径 -->
            <circle cx="100" cy="100" r="60" fill="green" stroke="black" stroke-width="3" opacity="0.9">
            </circle>
        </svg>

        <svg width="200" height="200">
            <!-- cx cy椭圆圆心坐标 rx水平半径 ry垂直半径 -->
            <ellipse cx="100" cy="100" rx="80" ry="40" fill="green" stroke="black" stroke-width="3"></ellipse>
        </svg>

        <svg width="200" height="200">
            <!-- x1 y1起点坐标 x2 y2 终点坐标 -->
            <!-- stroke-linecap 线条末尾样式 butt round square -->
            <!-- stroke-dasharray 线条表现，虚线样式 -->
            <line x1="30" y1="30" x2="120" y2="160" stroke="black" stroke-width="10" stroke-linecap="round"></line>
            <line x1="10" y1="180" x2="180" y2="180" stroke="black" stroke-width="3"
                stroke-dasharray="20,10,10,5,5,5,10"></line>
            <line x1="10" y1="190" x2="180" y2="190" stroke="black" stroke-width="3" stroke-dasharray="10,5"></line>
        </svg>

        <svg width="200" height="200">
            <!-- points多个坐标点依次连接的线条，不要求封闭，中间空格隔开 -->
            <polyline points="150,10 160,60 100,60" fill="none" stroke="black" stroke-width="3"></polyline>
            <polyline points="0,50 50,50 50,100 100,100 100,150 150,150 150,200 " fill="none" stroke="tomato"
                stroke-width="3">
            </polyline>
        </svg>

        <svg width="200" height="200">
            <!-- points多个坐标点依次连接的封闭图形，中间空格隔开 -->
            <polygon points="50,10 60,60 10,60" fill="green"></polygon>
            <polygon points="100,10 160,198 10,78 198,78 40,198" fill="gold" stroke="black"></polygon>
        </svg>

        <svg width="200" height="200">
            <!-- x y文字左下角的位置坐标，dx dy 上下的偏移量 -->
            <!-- text-anchor 属性定义了文本锚点，即文本相对于指定坐标的对齐方式，常用取值有 "start"（默认，左对齐）、"middle"（居中对齐）和 "end"（右对齐）。 -->
            <text x="20" y="20" fill="green" font-size="20" dx="-10" dy="-3">HelloWorld!</text>
            <text x="20" y="40" fill="tomato">
                first line
                <tspan x="20" y="60">second line</tspan>
            </text>

            <text x="20" y="100" fill="orange" transform="rotate(30 50,100)">I Love SVG!</text>
        </svg>

        <!-- xmlns:xlink="https://www.w3.org/1999/xlink"这个是固定的写法   -->
        <svg width="200" height="200" xmlns:xlink="https://www.w3.org/1999/xlink">
            <a xlink:href="http://www.baidu.com" target="_blank">
                <text x="20" y="50">有超链接的文本</text>
            </a>
        </svg>

        <svg width="200" height="200">
            <!-- 相同的属性可以统一写在g里，所有的svg里面属性都是如此 -->
            <g fill="none" stroke="black" stroke-width="3">
                <!-- d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。
                 常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。 -->
                <!-- 大小写含义不同：大写绝对定位，是坐标系的点位，小写相对定位，相对上一绘制点 -->
                <path d="M180 10 L50 40 L10 20"></path>
                <!-- 贝塞尔曲线 Q -->
                <path d="M20 180 Q100 60 180 180"></path>
            </g>
        </svg>

        <!-- 模糊和阴影 -->
        <svg width="200" height="200">
            <defs>
                <filter x="0" y="0" id="filter1">
                    <!-- feGaussianBlur元素用于对图像进行高斯模糊处理，它有两个主要参数：
                    stdDeviation：指定高斯模糊的标准差。标准差越大，模糊程度越高。可以使用一个或两个数字，分别表示水平和垂直方向的标准差。如果只提供一个数字，则水平和垂直方向的标准差相同。
                    in：指定输入图像，通常为 SourceGraphic ，表示应用滤镜效果的目标元素本身。 -->
                    <feGaussianBlur stdDeviation="10"></feGaussianBlur>
                </filter>
            </defs>
            <rect width="80" height="80" x="20" y="20" fill="blue" filter="url(#filter1)"></rect>
        </svg>
        <svg width="200" height="200">
            <defs>
                <filter x="0" y="0" width="200" height="200" id="filter2">
                    <!-- feOffset是 SVG 滤镜中的一个元素，用于在图像上创建一个偏移效果，可以用来创建阴影、轮廓和其他视觉效果。它的作用是将输入图像的每个像素沿着指定的水平和垂直方向移动一定的距离，然后将结果图像作为滤镜效果的输出 -->
                    <feOffset in="SourceAlpha" dx="20" dy="20" fill="bule"></feOffset>
                    <!-- 给偏移的效果图加高斯模糊 -->
                    <feGaussianBlur stdDeviation="10"></feGaussianBlur>
                    <!-- 混合原始图像 -->
                    <feBlend in="SourceGraphic"></feBlend>
                </filter>
                <filter x="0" y="0" width="200" height="200" id="filter3">
                    <!-- SVG 阴影效果可以通过 feDropShadow 元素实现，它可以为 SVG 图形元素添加阴影效果，使其看起来更加立体和真实。
                    dx 属性定义了阴影在水平方向上的偏移量。
                    dy 属性定义了阴影在垂直方向上的偏移量。
                    stdDeviation 属性定义了阴影的模糊半径，通常用于控制阴影的模糊程度。
                    flood-color 属性定义了阴影的颜色，默认为黑色。
                    flood-opacity 属性定义了阴影的不透明度，默认为1（完全不透明）。 -->
                    <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="grey" flood-opacity="0.9" />
                    <feBlend in="SourceGraphic"></feBlend>
                </filter>
            </defs>
            <rect width="80" height="80" x="20" y="20" fill="blue" filter="url(#filter2)"></rect>
            <rect width="40" height="40" x="120" y="120" fill="green" filter="url(#filter3)"></rect>
        </svg>

        <!-- 线性渐变和径向渐变 -->
        <svg width="200" height="200">
            <defs>
                <!-- x1y1 x2y2定义起始点坐标，标记线路 -->
                <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1">
                    <stop offset="0%" stop-color="rgb(255,255,0)"></stop>
                    <stop offset="100%" stop-color="rgb(255,0,0)"></stop>
                </linearGradient>
                <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad2">
                    <stop offset="0%" stop-color="rgb(255,255,0)"></stop>
                    <stop offset="100%" stop-color="rgb(255,0,0)"></stop>
                </linearGradient>
                <!-- cx 和 cy 属性定义了渐变的中心点坐标。
                r 属性定义了渐变的半径。
                fx 和 fy 属性定义了渐变焦点的坐标（可选），用于控制渐变的形状和方向。
                stop元素用于指定渐变中的颜色和颜色的位置。 -->
                <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad3">
                    <stop offset="0%" stop-color="rgb(255,255,255)"></stop>
                    <stop offset="100%" stop-color="rgb(0,0,255)"></stop>
                </radialGradient>
            </defs>
            <ellipse cx="100" cy="40" rx="80" ry="30" fill="url(#grad1)"></ellipse>
            <ellipse cx="40" cy="130" rx="20" ry="50" fill="url(#grad2)"></ellipse>
            <ellipse cx="130" cy="130" rx="50" ry="20" fill="url(#grad3)"></ellipse>
        </svg>
    </div>
</body>

</html>